<template>
  <div class="pageContent">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row :gutter="20">
            <el-col :span="4"><span style="display: inline-block;vertical-align: middle;line-height: 40px;">平台通讯录信息</span></el-col>
            <el-col :span="2" :offset="18">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <el-button type="primary" size="small" @click="addPageInfo">新增</el-button>
              </div>
            </el-col>
            <!--<el-col :span="6">-->
              <!--<div style="display: inline-block;vertical-align: middle;line-height: 40px;">-->
                <!--<div style="display: inline-block;vertical-align: middle;">-->
                  <!--<el-input size="small" v-model="tableSearchCon" @blur="inputBlur" placeholder="请输入搜索任务名称" style="display: inline-block;width: 70%;"></el-input>-->
                  <!--<el-button size="small" type="primary" @click="tableContentSearch">搜索</el-button>-->
                <!--</div>-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
        </div>
        <div class="logonRelease_content notSize">
          <el-table
            :header-cell-style="{background:'#f6f6f6'}"
            :data="tableData"
            stripe
            height="340"
            style="width: 100%">
            <el-table-column
              width="50"
              align="center"
              label="序号">
              <!--<template slot-scope="scope">-->
                <!--<span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>-->
              <!--</template>-->
              <template slot-scope="scope">
                <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="任务名称">
            </el-table-column>
            <el-table-column
              prop="group"
              align="center"
              label="任务组名">
            </el-table-column>
            <el-table-column
              prop="cronExpression"
              align="center"
              label="执行时间表达式">
            </el-table-column>
            <el-table-column
              prop="targetClassName"
              width="230"
              align="center"
              label="执行任务具体类名">
            </el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="任务状态">
            </el-table-column>
            <el-table-column
              width="150"
              align="center"
              label="下次执行时间">
              <template slot-scope="scope">
                <span>{{scope.row.nextFireTime | timeC}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="240"
              label="操作">
              <template slot-scope="scope">
                <div class="tableBtnBox">
                  <el-tooltip class="item" effect="dark" content="修改" placement="top">
                    <el-button type="primary" size="mini" @click="changeBtn(scope.row)" icon="el-icon-edit" circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" size="mini" @click="deleteBtn(scope.row)" icon="el-icon-delete" circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="恢复" placement="top">
                    <el-button type="warning" size="mini" @click="runJobNow(scope.row)" icon="el-icon-arrow-right" circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="暂停" placement="top">
                    <el-button type="success" size="mini" v-if="scope.row.status == '暂停'" @click="resumeJob(scope.row)" icon="el-icon-refresh" circle></el-button>
                    <el-button type="success" size="mini" v-else disabled  icon="el-icon-refresh" circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="恢复" placement="top">
                    <el-button type="info" size="mini" v-if="scope.row.status == '正常'" @click="pauseJob(scope.row)"  icon="el-icon-caret-right" circle></el-button>
                    <el-button type="info" size="mini" v-else disabled  icon="el-icon-caret-right" circle></el-button>
                  </el-tooltip>
                </div>
                <!--<el-button type="primary" icon="el-icon-edit" circle @click="changeBtn(scope.row)"></el-button>-->
                <!--<el-button type="danger" icon="el-icon-delete" circle></el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--<div class="tablePage" style="margin-top: 6px">-->
          <!--<el-pagination-->
            <!--background-->
            <!--@current-change="handleSizeChange"-->
            <!--:page-size="postList.rowBounds.limit"-->
            <!--layout="prev, pager, next"-->
            <!--:total="pageSize.count">-->
          <!--</el-pagination>-->
        <!--</div>-->
      </el-card>
    </div>

  </div>
</template>

<script>
import modify from '@/assets/images/myImg/modify.png'
import deleteIcon from '@/assets/images/myImg/deleteIcon.png'
import implement from '@/assets/images/myImg/implement.png'
import recovery from '@/assets/images/myImg/recovery.png'
import suspend from '@/assets/images/myImg/suspend.png'
import dateChange from '@/utils/dateChange'
import { formatDate, formatTime } from '@/utils/date'
export default {
  data() {
    return {
      modify,
      deleteIcon,
      implement,
      recovery,
      suspend,
      myDataId: [],
      checkData: [],
      valBegin: '',
      valEnd: '',
      notValue: '2',
      tableSearchCon: '',
      serialNumber: 1,
      pageSize: {},
      deleteData: {
        name: '',
        group: ''
      },
      resumeData: {
        name: '',
        group: ''
      },
      pauseData: {
        name: '',
        group: ''
      },
      runJobData: {
        name: '',
        group: ''
      },
      postList: {
        'condition': [
          { // 用户名
            property: 'name',
            value: '',
            type: 'LIKE'
          }
        ],
        'rowBounds': {
          'offset': 0,
          'limit': 10
        }
      },
      tableData: []
    }
  },
  computed: {

  },
  filters: {
    timeC(val) {
      console.log('------------------------------')
      const aaa = formatDate(val)
      const bbb = formatTime(val)
      console.log(aaa)
      console.log(bbb)
      console.log('------------------------------')
      return dateChange.dateChange(val)
    }
  },
  components: { },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() { // 获取内容
      this.$store
        .dispatch('TimingTask', this.postList)
        .then(res => {
          this.tableData = res.data
          this.pageSize = res.data
        })
        .catch(() => {

        })
    },
    changeBtn(arr) {
      this.$router.push({ name: 'taskChangeInfo', params: { name: arr.name, group: arr.group }, query: { name: arr.name, group: arr.group }})
    },
    runJobNow(arr) {
      this.runJobData.name = arr.name
      this.runJobData.group = arr.group
      this.$store
        .dispatch('RunJobNow', this.runJobData)
        .then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '立即执行成功',
              type: 'success'
            })
            this.fetchData()
          } else {
            this.$message({
              message: '立即执行异常',
              type: 'error'
            })
          }
        })
        .catch(() => {

        })
    },
    deleteBtn(arr) {
      this.deleteData.name = arr.name
      this.deleteData.group = arr.group
      this.$store
        .dispatch('DeleteJob', this.deleteData)
        .then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          } else {
            this.$message({
              message: '删除异常',
              type: 'error'
            })
          }
        })
        .catch(() => {

        })
    },
    pauseJob(arr) {
      this.pauseData.name = arr.name
      this.pauseData.group = arr.group
      this.$store
        .dispatch('PauseJob', this.pauseData)
        .then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '暂停成功',
              type: 'success'
            })
            this.fetchData()
          } else {
            this.$message({
              message: '暂停异常',
              type: 'error'
            })
          }
        })
        .catch(() => {

        })
    },
    resumeJob(arr) {
      this.resumeData.name = arr.name
      this.resumeData.group = arr.group
      this.$store
        .dispatch('ResumeJob', this.resumeData)
        .then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '恢复成功',
              type: 'success'
            })
            this.fetchData()
          } else {
            this.$message({
              message: '恢复异常',
              type: 'error'
            })
          }
        })
        .catch(() => {

        })
    },
    addPageInfo() {
      this.$router.push({ name: 'taskAddInfo' })
    },
    inputBlur() { // 搜索框失去焦点
      if (this.tableSearchCon == '') {
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = ''
        this.fetchData()
        this.serialNumber = 1
      }
    },
    handleSizeChange(val) { // 分页
      this.postList.rowBounds.offset = (val - 1) * 10
      this.serialNumber = val
      this.fetchData()
    },
    tableContentSearch() { // 用户名搜索
      if (this.tableSearchCon) {
        this.postList.rowBounds.offset = 0
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = this.tableSearchCon
        this.fetchData()
      } else {
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = ''
        this.fetchData()
      }
    },
    dataFor(arr, myData) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].property == myData) {
          return i
        }
      }
    }
  }
}
</script>
<style scoped>
  .logonRelease_title span{
    font-size: 22px;
    color: #333333;
    display: inline-block;
  }
  .logonRelease_content{
    width: 100%;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

</style>

